<template>
	<view class="action-order">
		<view class="address-box">
			<view class="address-content-list" v-if="showAddress" @click="navigateAddress(2, address.addressID)">
				<block v-if="address">
					<view class="left">
						<view class="name-phone">
							<text class="name">{{ address.name }}</text>
							<text class="phone">{{ address.mobile }}</text>
						</view>
						<view class="address">
							<!-- <text class="tips">[ 默认 ] </text> -->{{ address.address_detail }}
						</view>
					</view>
					<view class="right">
						<image class="image" src="/static/images/common/address_in.png" mode="widthFix"></image>
					</view>
				</block>
				<block v-else>
					<view class="left-two" @click.stop="navigateAddress(3, 0)">
						<view class="tips">提示：请先去添加收货地址</view>
						<image class="image" src="/static/images/common/address_in.png" mode="widthFix"></image>
					</view>
				</block>
			</view>
		</view>
		<!-- <view class="tips-content">提示<br>(1)未支付订单超时将会自动取消，请尽快完成支付~<br>(2)确认支付成功后地址不可修改</view> -->
		<view class="order-detail">
			<view class="date">购买时间:&emsp;{{ order.date }}</view>
			<view class="content">
				<image class="detail-img" :src="order.imgUrl" mode="widthFix"></image>
				<view class="detail-content">
					<view class="title">{{ order.title }}</view>
					<view class="price-number">
						<view class="price"
							v-if="order.type === 1 || order.type === 2 || order.type === 5 || order.type === 6">￥
							{{ order.price }}
						</view>
						<view class="price" v-else-if="order.type === 3">提货券： {{ order.price }}</view>
						<view class="price" v-else>积分： {{ order.price }}</view>
						<view class="number">X {{ order.number }}</view>
					</view>
				</view>
			</view>
			<view class="total-price">
				<view class="block"></view>
				<view class="block-two">
					<view class="total-goods">共{{ order.total_number }}件商品</view>
					<view class="price"
						v-if="order.type === 1 || order.type === 2 || order.type === 5 || order.type === 6">
						总金额￥{{ order.total_price }}</view>
					<view class="price" v-else-if="order.type === 3">共 {{ order.total_price }} 张提货券</view>
					<view class="price" v-else>共 {{ order.total_price }} 点积分</view>
				</view>
			</view>
			<view class="total-price-two">
				<view class="price" v-if="order.type === 1 || order.type === 2 || order.type === 5 || order.type === 6">
					实付款￥{{ order.total_price }}</view>
				<view class="price" v-else-if="order.type === 3">需消耗提货券 {{ order.total_price }} 张</view>
				<view class="price" v-else>需消耗积分 {{ order.total_price }} 点</view>
			</view>
			<!-- 付款码设置 -->
			<view class="main-content-one" v-if="showPay">
				<view class="button-group">
					<view :class="`button ${select_status_one == 0 ? 'active' : ''}`" @click="selectOne(0)">
						<image class="button-img" src="/static/images/common/alipay.png"></image>
						<view class="button-text">支付宝</view>
					</view>
					<view :class="`button ${select_status_one == 1 ? 'active' : ''}`" @click="selectOne(1)">
						<image class="button-img" src="/static/images/common/wechat.png"></image>
						<view class="button-text">微信</view>
					</view>
				</view>
				<view class="button-group">
					<view :class="`button ${select_status_one == 2 ? 'active' : ''}`" @click="selectOne(2)">
						<image class="button-img" src="/static/images/common/creditCard.png"></image>
						<view class="button-text">银行卡</view>
					</view>
					<view :class="`button ${select_status_one == 3 ? 'active' : ''}`" @click="selectOne(3)">
						<image class="button-img" src="/static/images/common/reward.png"></image>
						<view class="button-text">佣金</view>
					</view>
				</view>
				<view class="address-content" v-if=" select_status_one === 0 || select_status_one === 1">
					<!--  -->
					<view class="upload-style">
						<view class="upload">
							<u-album class="show-img" :urls="userURL"></u-album>
						</view>
					</view>
				</view>
				<view class="input-content-style" v-if="select_status_one === 2">
					<view class="edit-content-input">
						<view class="input-title">手机号</view>
						<view class="input-style">{{ mobile }}</view>
						<!-- <input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="手机号"
							maxlength="11" v-model="mobile" :focus="numberFocus" @blur="lostFocus"
							:disabled="true"></input> -->
					</view>
					<view class="edit-content-input">
						<view class="input-title">名称</view>
						<view class="input-style">{{ name }}</view>
						<!-- <input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="姓名"
							v-model="name" :focus="numberFocusTwo" @blur="lostFocusTwo" :disabled="true"></input> -->
					</view>
					<view class="edit-content-input">
						<view class="input-title">开户银行</view>
						<view class="input-style">{{ bankName }}</view>
						<!-- <input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="开户银行"
							v-model="bankName" :focus="numberFocusThree" @blur="lostFocusThree"
							:disabled="true"></input> -->
					</view>
					<view class="edit-content-input">
						<view class="input-title">支行</view>
						<view class="input-style">{{ bankOtherName }}</view>
						<!-- <input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="支行名"
							v-model="bankOtherName" :focus="numberFocusFour" @blur="lostFocusFour"
							:disabled="true"></input> -->
					</view>
					<view class="edit-content-input-two">
						<view class="input-content">
							<view class="input-title">银行卡号</view>
							<view class="input-style">{{ cardNumber }}</view>
							<!-- <input class="input-style" type="text" placeholder-class="input-placeholder"
								placeholder="银行卡号" maxlength="19" v-model="cardNumber" :focus="numberFocusFive"
								@blur="lostFocusFive" :disabled="true"></input> -->
						</view>
						<view class="copy-button" @click="copy">复制</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 收款码设置 -->
		<view class="main-content" v-if="showUpload">
			<view class="upload-style">
				<view :class="`${isUploadURL ? 'upload-two': 'upload'}`" @click="uploadImg('handheldIDCardImg')">
					<image :class="`img ${isUploadURL? ' success' : ''}`" src="/static/images/common/plus.png">
					</image>
					<view :class="`text ${isUploadURL? ' success' : ''}`">{{ tips }}</view>
					<image class="show-img" :src="isUploadURL" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="button-style">
			<view :class="`button ${isSuccess ? 'success' : ''}`" @click="touchOffDebounce">确认支付</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">{{ maskTips }}</text>
						<view class="button-box">
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
		<!-- 弹窗支付 -->
		<view class="mask" v-if="showTipsTwo" @touchmove.stop.prevent>
			<u-transition :show="showTipsTwo">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">请使用支付宝进行支付</text>
						<view class="button-box-two">
							<view class="button-two" @click="commitAlipay">使用支付宝APP支付</view>
							<view class="button-group">
								<view class="button-one" @click="commit">已完成支付</view>
								<view class="button-three" @click="cancel">取消</view>
							</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import Fn from '@/common/public.js';
	import {
		getOrder,
		getaddress,
		uploadPic,
		getUserPay,
		payOrder
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 用户数据 */
				token: '', // 用户token
				imgUrl: store.state.baseUrl + '/api/common/uploadPic', // 上传图片接口
				name: '',
				mobile: '',

				/* 商品信息 */
				id: '', // 商品编号

				/* 收货地址 */
				new_address: {}, // 选择新的地址
				address: {}, // 地址详情

				/* 订单信息 */
				order: {}, // 订单详情

				/* 卖方信息 */
				sellUser: '', // 卖方信息详情

				/* 选择按钮 - 收款码信息 */
				select_status: 0, // 选择收款码设置
				select_status_one: 0, // 选择支付码设置
				tips: '请上传支付截图', // 收款码提示
				isUploadURL: '', // 已上传收款码图片 /static/images/common/wechat.png
				userURL: [], // 卖方二维码

				/* 银行卡账号 */
				mobile: '', // 手机号
				name: '', // 姓名
				bankName: '', // 开户银行
				bankOtherName: '', // 开户支行
				cardNumber: '', // 银行卡号

				/* 输入状态 */
				numberFocus: false, // 手机号聚焦状态
				numberFocusTwo: false, // 账号 - 银行卡号 聚焦状态
				numberFocusThree: false, // 姓名聚焦状态
				numberFocusFour: false, // 开户银行聚焦状态
				numberFocusFive: false, // 银行卡号聚焦状态

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				isSuccess: false, // 禁止点击

				/* 弹窗 - 支付宝支付 */
				showTipsTwo: false, // 弹窗提示
				alipayUrl: '', // 支付链接

				/* 地址-收款码-付款码设置 */
				showAddress: false, // 地址默认不显示
				showPay: false, // 付款码默认不显示
				showUpload: false, // 支付截图默认不显示
			};
		},
		mounted() {

		},
		onLoad(option) {
			/* 获取用户token */
			this.getToken();

			/* 获取订单编号 */
			this.id = option.id;

			/* 查询订单信息 */
			// this.getOrderDetail();
		},
		onShow() {
			/* 查询订单信息 */
			this.getOrderDetail();
		},
		methods: {

			/* 获取token */
			getToken() {
				this.token = uni.getStorageSync('token');
			},

			/* 获取订单信息 */
			async getOrderDetail() {
				const that = this;
				const params = {
					ids: that.id
				};
				await getOrder(params).then((res) => {
					if (res.status === 1) {
						const result = res.data[0];
						// console.log(result);
						that.order = {
							date: result.createTime,
							title: result.goodsName,
							price: result.price, // 商品单价
							number: result.num,
							total_number: result.num,
							total_price: result.sumPrice, // 商品总价
							pay_price: result.payment_price, // 实际支付金额
							imgUrl: result.goodsLogo,
							goodsID: result.goodsId,
							userID: result.sellUserId,
							type: result.goodsType,
							isFinal: result.is_final
						};
						if (result.goodsType === 5) { // 抢购分商品
							that.showAddress = true;
							that.showPay = true;
							that.showUpload = true;
						} else if (result.goodsType === 3 || result.goodsType ===
							4) { // 提货券商品 显示地址 不显示收款码 支付截图
							that.showAddress = true;
							that.showPay = false;
							that.showUpload = false;
						} else {
							if (result.goodsType === 1 || result.goodsType ===
								6) { // 竞购商品 最终价 显示地址 非最终价只显示收款码 支付截图
								if (result.is_final === 0) {
									that.showAddress = false;
									that.showPay = true;
									that.showUpload = true;
								} else {
									that.showAddress = true;
									that.showPay = true;
									that.showUpload = true;
								};
							} else {
								that.showAddress = false;
								that.showPay = true;
								that.showUpload = true;
							};
						};
					} else {
						Fn.Toast(res.msg, 2, 1500);
					};
				});
				await getaddress().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						if (result === null) {
							that.address = result;
							// that.address = {
							// 	address_detail: '请去选择地址',
							// };
						} else {
							that.address = {
								addressID: result.addressId,
								name: result.name,
								mobile: result.phone,
								address_detail: result.provinceName + result.cityName + result.areaName +
									result.userAddress
							};
						};
					} else {
						Fn.Toast(res.msg, 2, 1500);
					};
				});
				const params_two = {
					userId: that.order.userID,
					goodsId: that.order.goodsID
				};
				await getUserPay(params_two).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result)
						let imgList = [];
						that.sellUser = result;
						for (let i = 0; i < that.sellUser.length; i++) {
							if (that.sellUser[i].type === 2) {
								imgList.push(that.sellUser[i].img);
								that.userURL = imgList;
							};
							if (that.sellUser[i].type === 1) {
								that.mobile = that.sellUser[i].phone;
								that.name = that.sellUser[i].name;
								that.bankName = that.sellUser[i].bankName;
								that.bankOtherName = that.sellUser[i].bankOtherName;
								that.cardNumber = that.sellUser[i].cardNum;
							};
						};
					} else {
						Fn.Toast(res.msg, 2, 1500);
					};
				});
			},

			/* 提交增加防抖 */
			touchOffDebounce() {
				// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
				// 第二个为延时执行函数的时间
				// 第三个是否立即执行
				this.$debounce(this.addOrder, 1000, true);
			},

			/* 下订单 */
			addOrder() {
				const that = this;
				that.isSuccess = true;
				// 5 - 抢购分商品 - 送抢购分 + 消费积分 | 6 - 绿色积分商品 - 送绿色积分
				if (that.order.type === 5 || that.order.type === 6) {
					if (!that.address) {
						Fn.Toast('请先去添加收货地址', 3, 1500);
						that.isSuccess = false;
						return;
					} else {
						if (/* that.select_status_one != 0 && */ that.select_status_one != 3) {
							if (that.isUploadURL === '') {
								Fn.Toast('请先上传支付截图', 3, 1500);
								that.isSuccess = false;
								return;
							};
							const params = {
								id: that.id,
								payPic: that.isUploadURL,
								addressId: that.address.addressID
							};
							payOrder(params).then((res) => {
								if (res.status === 1) {
									const result = res;
									that.maskTips = result.msg;
									that.showTips = true;
								} else {
									that.isSuccess = false;
									Fn.Toast(res.msg, 3, 1500);
								};
							});
							return;
						}
						/* else if (that.select_status_one == 0) {
							const params = {
								id: that.id,
								payPic: that.isUploadURL,
								addressId: that.address.addressID,
								payment_method: 3
							};
							payOrder(params).then((res) => {
								if (res.status === 1) {
									const result = res;
									// console.log(result);
									that.showTipsTwo = true;
									// that.maskTips = result.msg;
									// that.showTips = true;
									that.alipayUrl = result.data;
								} else {
									that.isSuccess = false;
									Fn.Toast(res.msg, 3, 1500);
								};
							});
							return;
						} */
						else if (that.select_status_one == 3) {
							const params = {
								id: that.id,
								payPic: that.isUploadURL,
								addressId: that.address.addressID,
								payment_method: 2
							};
							payOrder(params).then((res) => {
								if (res.status === 1) {
									const result = res;
									that.maskTips = result.msg;
									that.showTips = true;
								} else {
									that.isSuccess = false;
									Fn.Toast(res.msg, 3, 1500);
								};
							});
							return;
						}
					}
				}
				// // 提货券商品 不需要支付截图
				// if (that.order.type === 3 || that.order.type === 4) {
				// 	const params = {
				// 		id: that.id,
				// 		addressId: that.address.addressID
				// 	};
				// 	payOrder(params).then((res) => {
				// 		if (res.status === 1) {
				// 			const result = res;
				// 			that.maskTips = result.msg;
				// 			that.showTips = true;
				// 		} else {
				// 			that.isSuccess = false;
				// 			Fn.Toast(res.msg, 3, 1500);
				// 		};
				// 	});
				// 	return;
				// };
				// // 广告分商品 不需要地址
				// if (that.order.type === 2) {
				// 	if (that.isUploadURL === '') {
				// 		Fn.Toast('请先上传支付截图', 3, 1500);
				// 		that.isSuccess = false;
				// 		return;
				// 	};
				// 	const params = {
				// 		id: that.id,
				// 		payPic: that.isUploadURL,
				// 	};
				// 	payOrder(params).then((res) => {
				// 		// console.log(res);
				// 		if (res.status === 1) {
				// 			const result = res;
				// 			that.maskTips = result.msg;
				// 			that.showTips = true;
				// 		} else {
				// 			that.isSuccess = false;
				// 			Fn.Toast(res.msg, 3, 1500);
				// 		};
				// 	});
				// 	return;
				// };
				// // 竞购商品 最终价需填地址 非最终价不用填地址
				// if (that.order.type === 1) {
				// 	if (that.order.isFinal === 0) {
				// 		if (that.isUploadURL === '') {
				// 			Fn.Toast('请先上传支付截图', 3, 1500);
				// 			that.isSuccess = false;
				// 			return;
				// 		};
				// 		const params = {
				// 			id: that.id,
				// 			payPic: that.isUploadURL,
				// 		};
				// 		payOrder(params).then((res) => {
				// 			// console.log(res);
				// 			if (res.status === 1) {
				// 				const result = res;
				// 				that.maskTips = result.msg;
				// 				that.showTips = true;
				// 			} else {
				// 				that.isSuccess = false;
				// 				Fn.Toast(res.msg, 3, 1500);
				// 			};
				// 		});
				// 	} else {
				// 		if (that.isUploadURL === '') {
				// 			Fn.Toast('请先上传支付截图', 3, 1500);
				// 			that.isSuccess = false;
				// 			return;
				// 		};
				// 		const params = {
				// 			id: that.id,
				// 			payPic: that.isUploadURL,
				// 			addressId: that.address.addressID
				// 		};
				// 		payOrder(params).then((res) => {
				// 			// console.log(res);
				// 			if (res.status === 1) {
				// 				const result = res;
				// 				that.maskTips = result.msg;
				// 				that.showTips = true;
				// 			} else {
				// 				that.isSuccess = false;
				// 				Fn.Toast(res.msg, 3, 1500);
				// 			};
				// 		});
				// 	};
				// 	return;
				// };
			},

			/* 选择收款设置 */
			select(id) {
				if (id === 0) {
					this.select_status = 0;
					this.tips = '支付宝支付截图';
					this.isUploadURL = '';
					this.showUpload = true;
				} else if (id === 1) {
					this.select_status = 1;
					this.tips = '微信支付截图';
					this.isUploadURL = '';
					this.showUpload = true;
				} else {
					this.select_status = 2;
					this.tips = '银行转账截图';
					this.isUploadURL = '';
					this.showUpload = true;
				};
			},

			/* 选择付款设置 */
			selectOne(id) {
				const that = this;
				let imgList = [];
				if (id === 0) {
					that.select_status_one = 0;
					that.userURL = imgList;
					that.showUpload = true;
					for (let i = 0; i < that.sellUser.length; i++) {
						if (that.sellUser[i].type === 2) {
							imgList.push(that.sellUser[i].img);
							that.userURL = imgList;
						};
					};
				} else if (id === 1) {
					that.select_status_one = 1;
					that.showUpload = true;
					that.userURL = imgList;
					for (let i = 0; i < that.sellUser.length; i++) {
						if (that.sellUser[i].type === 3) {
							imgList.push(that.sellUser[i].img);
							that.userURL = imgList;
						};
					};
				} else if (id === 2) {
					that.select_status_one = 2;
					that.showUpload = true;
				} else if (id === 3) {
					that.select_status_one = 3;
					that.showUpload = false;
				};
			},

			/* 上传图片 */
			uploadImg(type) {
				const that = this;
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
						uni.uploadFile({
							url: that.imgUrl, //post请求的地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Token': that.token // 设置Token头部
							},
							formData: {
								'upload_type': 'idCard' //formData是指除了图片以外，额外加的字段
							},
							success: (uploadFileRes) => {
								//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
								var result = JSON.parse(uploadFileRes.data);
								if (result.status === 1) {
									Fn.Toast(result.msg, 3, 1500);
									that.isUploadURL = result.data.src;
								} else {
									that.maskTips = result.msg;
									that.showTips = true;
									that.isUploadURL = '';
								};
							},
						});
					},
				});
			},

			/* 获取新选择的地址 */
			getChoose(object) {
				if (object) {
					this.new_address = object;
				} else {
					return;
				};
				this.address = {
					addressID: this.new_address.id,
					name: this.new_address.name,
					mobile: this.new_address.mobile,
					address_detail: this.new_address.address
				};
			},

			/* 复制银行卡号 */
			copy() {
				uni.setClipboardData({
					data: this.cardNumber, //要被复制的内容
					success: () => { //复制成功的回调函数
						Fn.Toast('复制成功', 3, 1500); //提示
					},
					fail: () => {
						Fn.Toast('复制失败', 3, 1500); //提示
					}
				});
			},

			/* 确认 */
			confirm() {
				this.showTips = false;
				uni.navigateBack({
					delta: 1
				});
			},

			/* 取消 */
			cancel() {
				this.isSuccess = false;
				this.showTipsTwo = false;
			},

			/* 使用支付宝支付 */
			commitAlipay() {
				const that = this;
				const url = 'alipays://platformapi/startapp?saId=10000007&qrcode=' + that.alipayUrl;
				// console.log(url)
				window.location.href = url;
			},

			/* 已完成支付 */
			commit() {
				this.showTipsTwo = false;
				uni.navigateBack({
					delta: 1
				});
			},

			/* 失去焦点时 */
			lostFocus(event) {
				this.numberFocus = false;
			},

			/* 失去焦点时 */
			lostFocusTwo(event) {
				this.numberFocusTwo = false;
			},

			/* 失去焦点时 */
			lostFocusThree(event) {
				this.numberFocusThree = false;
			},

			/* 失去焦点时 */
			lostFocusFour(event) {
				this.numberFocusFour = false;
			},

			/* 失去焦点时 */
			lostFocusFive(event) {
				this.numberFocusFive = false;
			},

			/* 跳转至地址页面 */
			navigateAddress(option, id) {
				// console.log(option)
				if (option == 1) {
					uni.navigateTo({
						url: '/pages/mine/address/address?style=' + option,
					});
				} else if (option == 3) {
					uni.navigateTo({
						url: '/pages/mine/address/address?style=' + option + '&id=' + id,
					});
				} else {
					uni.navigateTo({
						url: '/pages/mine/address/address?style=' + option + '&id=' + id,
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	uni-page-body {
		background: none;
	}

	.action-order {
		padding: 15px 18px 30px 18px;
		font-family: PingFang_Medium;

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					// font-weight: 600;
					font-family: PingFang_Bold;
				}

				.inner-box {
					margin: 20rpx 20rpx 40rpx 20rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi;
						// font-weight: bold;
						font-family: PingFang_Bold;
						color: #89898C;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							cursor: pointer;
						}
					}

					.button-box-two {
						text-align: center;
						margin-top: 50rpx;

						.button-one {
							// display: inline-block;
							width: 200rpx;
							height: 76rpx;
							line-height: 76rpx;
							// margin: 20rpx auto 0 auto;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 30rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							// cursor: pointer;
						}

						.button-group {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 20rpx;
						}

						.button-two {
							background-color: #000000;
							// display: inline-block;
							width: 450rpx;
							height: 80rpx;
							line-height: 80rpx;
							margin: 0 auto 0 auto;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 30rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							// cursor: pointer;
						}

						.button-three {
							// display: inline-block;
							width: 200rpx;
							height: 76rpx;
							line-height: 76rpx;
							// margin: 20rpx auto 0 auto;
							// margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 30rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							// cursor: pointer;
						}
					}
				}
			}
		}

		.address-box {
			background-color: #FFFFFF;
			border-radius: 8px;

			.address-content-list {
				padding: 30rpx 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					width: 90%;

					.name-phone {
						// font-weight: 600;
						font-family: PingFang_Bold;

						.name {
							font-size: 36rpx;
							margin-right: 30rpx;
						}

						.phone {
							font-size: 28rpx;
						}
					}

					.address {
						margin-top: 12rpx;
						color: #B4B4B7;
						font-size: 28rpx;

						.tips {
							margin-right: 20rpx;
							color: #000000;
						}
					}

					.tips {
						color: #AD4440;
						font-size: 28rpx;
						font-family: PingFang_Bold;
					}
				}

				.left-two {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tips {
						color: #AD4440;
						font-size: 28rpx;
						font-family: PingFang_Bold;
					}

					.image {
						width: 2vw;
						height: 4vw;
					}
				}

				.right {

					.image {
						width: 2vw;
						height: 4vw;
						// cursor: pointer;

						&:nth-of-type(n+2) {
							margin-left: 26rpx;
						}
					}
				}
			}
		}

		.tips-content {
			background-color: #FFFFFF;
			margin: 20rpx 0;
			padding: 30rpx 36rpx;
			color: #AD4440;
			font-size: 28rpx;
			// font-weight: 600;
			font-family: PingFang_Bold;
		}

		.order-detail {
			background-color: #FFFFFF;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;

			.date {
				color: #89898C;
				font-size: 26rpx;
			}

			.content {
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.detail-img {
					width: 23vw;
					height: 23vw;
				}

				.detail-content {
					width: 52vw;

					.title {
						font-size: 28rpx;
					}

					.price-number {
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							font-size: 30rpx;
							font-weight: 600;
						}

						.number {
							color: #89898C;
							font-size: 24rpx;
							// font-weight: 600;
							font-family: PingFang_Bold;
						}
					}
				}
			}

			.total-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-align: right;

				.total-goods {
					color: #89898C;
					font-size: 26rpx;
				}

				.price {
					margin-left: 20rpx;
					font-size: 26rpx;
				}

				.block-two {
					display: flex;
					align-items: center;
				}

				.block {
					width: 10rpx;
				}
			}

			.total-price-two {
				// display: flex;
				// align-items: center;
				// justify-content: right;
				text-align: right;

				.price {
					margin-top: 20rpx;
					font-size: 36rpx;
					// font-weight: 600;
					font-family: PingFang_Bold;
				}
			}
		}

		.main-content-one {
			background-color: #FFFFFF;
			margin: 40rpx 0;
			padding: 30rpx;
			// box-shadow: 0px 2px 5px #dedede;

			.button-group {
				display: flex;
				align-items: center;
				justify-content: center;

				.button {
					width: 20vw;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 8px 16px;
					cursor: pointer;

					&:nth-of-type(n+1) {
						margin-right: 10px;
					}

					&:nth-of-type(2) {
						margin-right: 0;
						margin-left: 10px;
					}

					.button-img {
						width: 5vw;
						height: 5vw;
					}

					.button-text {
						margin-left: 8px;
						font-size: 15px;
						// font-weight: 600;
						font-family: PingFang_Bold;
					}
				}

				.button-one {
					width: 20vw;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 8px 16px;
					margin-left: 10px;
				}

				.active {
					background-color: #F5F5F5;
				}
			}

			.upload-style {
				margin-top: 4vh;
				// border: 2px solid #E1E1E1;
				display: flex;
				justify-content: center;
				align-items: center;

				.upload {
					position: relative;
					// width: 30vw;
					// height: 44vw;
					// padding: 50rpx;
					text-align: center;
					// line-height: 7vw;
					// border: 2px solid #E1E1E1;
					// cursor: pointer;

					/* &.disabled {
						pointer-events: none;
						cursor: not-allowed;
					} */

					.img {
						position: relative;
						z-index: 1;
						width: 60rpx;
						height: 60rpx;
						top: 50rpx;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.text {
						position: relative;
						z-index: 1;
						color: #b5b5b5;
						font-size: 26rpx;
						top: 50%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.show-img {
						// position: absolute;
						// top: 0;
						// left: 0;
						// bottom: 0;
						// right: 0;
						// margin: auto;
						width: 100%;
						height: 100%;
					}
				}
			}

			.content-text {
				text-align: center;
				margin: 60rpx 0;
				color: #b5b5b5;
				font-size: 28rpx;
			}
		}

		.main-content {
			background-color: #FFFFFF;
			margin: 40rpx 0;
			padding: 30rpx;
			box-shadow: 0px 2px 5px #dedede;

			// .button-group {
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;

			// 	.button {
			// 		width: 20vw;
			// 		display: flex;
			// 		align-items: center;
			// 		align-content: center;
			// 		padding: 8px 16px;
			// 		cursor: pointer;

			// 		&:nth-of-type(n+1) {
			// 			margin-right: 10px;
			// 		}

			// 		&:nth-of-type(2) {
			// 			margin-right: 0;
			// 			margin-left: 10px;
			// 		}

			// 		.button-img {
			// 			width: 5vw;
			// 			height: 5vw;
			// 		}

			// 		.button-text {
			// 			margin-left: 8px;
			// 			font-size: 15px;
			// 			font-weight: 600;
			// 		}
			// 	}

			// 	.button-one {
			// 		width: 20vw;
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: center;
			// 		padding: 8px 16px;
			// 		margin-left: 10px;
			// 	}

			// 	.active {
			// 		background-color: #F5F5F5;
			// 	}
			// }

			.upload-style {
				margin: 4vh 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.upload {
					position: relative;
					width: 30vw;
					height: 30vw;
					padding: 50rpx;
					text-align: center;
					// line-height: 7vw;
					border: 2px solid #E1E1E1;
					// cursor: pointer;

					/* &.disabled {
						pointer-events: none;
						cursor: not-allowed;
					} */

					.img {
						position: relative;
						z-index: 1;
						width: 60rpx;
						height: 60rpx;
						top: 50%;
						transform: translateY(-60rpx);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.text {
						position: relative;
						z-index: 1;
						color: #b5b5b5;
						font-size: 26rpx;
						top: 50%;
						transform: translateY(-20rpx);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.show-img {
						// position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
						width: 100%;
						height: 100%;
					}
				}

				/* 上传图片成功 */
				.upload-two {
					// position: relative;
					// width: 30vw;
					// height: 44vw;
					// padding: 50rpx;
					// text-align: center;
					// line-height: 7vw;
					// border: 2px solid #E1E1E1;
					// cursor: pointer;

					/* &.disabled {
						pointer-events: none;
						cursor: not-allowed;
					} */

					.img {
						position: relative;
						z-index: 1;
						width: 60rpx;
						height: 60rpx;
						top: 40%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.text {
						position: relative;
						z-index: 1;
						color: #b5b5b5;
						font-size: 26rpx;
						top: 50%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.show-img {
						// position: absolute;
						// top: 0;
						// left: 0;
						// bottom: 0;
						// right: 0;
						// margin: auto;
						// width: 50vw;
						// height: 100%;
					}
				}

				.content-text {
					text-align: center;
					margin: 60rpx 0;
					color: #b5b5b5;
					font-size: 28rpx;
				}
			}
		}

		.input-content-style {
			margin-top: 40rpx;

			.edit-content-input {
				padding: 24rpx 22rpx;
				border: 1px solid #E1E1E1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:nth-of-type(n+2) {
					margin-top: 30rpx;
				}

				.input-style {
					width: 50vw;
					color: #58585a;
					font-size: 30rpx;
					// font-weight: 600;
					// text-align: right;
				}

				.input-placeholder {
					color: #a5a5a8;
					font-size: 28rpx;
					// font-weight: 600;
				}

				.input-title {
					font-size: 28rpx;
					// font-weight: 600;
				}
			}

			.edit-content-input-two {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input-content {
					width: 52vw;
					padding: 24rpx 22rpx;
					border: 1px solid #E1E1E1;
					// display: flex;
					// align-items: center;
					// justify-content: space-between;

					.input-style {
						// width: 45vw;
						color: #58585a;
						font-size: 30rpx;
						margin-top: 10rpx;
						// font-weight: 600;
						// text-align: right;
					}

					.input-placeholder {
						color: #a5a5a8;
						font-size: 28rpx;
						// font-weight: 600;
					}

					.input-title {
						font-size: 28rpx;
						// font-weight: 600;
					}
				}

				.copy-button {
					margin-left: 10rpx;
					padding: 10rpx 20rpx;
					background-color: #AD4440;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 3px;
					cursor: pointer;
				}
			}
		}

		.button-style {
			// width: 80vw;
			line-height: 90rpx;
			margin: 80rpx auto 0 auto;
			text-align: center;

			.button {
				background-color: #FCEBD9;
				// cursor: pointer;
				font-family: PingFang_Bold;

				&.success {
					pointer-events: none;
					cursor: default;
				}
			}
		}
	}
</style>
